<script lang="ts" setup>
import { h, ref } from 'vue'
import { ElMessageBox, ElMessage, ElDialog } from 'element-plus'
let gridData = ref([])
let currentPage1 = ref(1)
let { proxy } = getCurrentInstance() as any
let dialogFormVisible = ref(false)
const form = ref({
  id: 0,
  customerHardware: '',
  customerName: ''
})
const showKey = (scope: any) => {
  ElMessageBox({
    title: '公钥详情',
    // Should pass a function if VNode contains dynamic props
    message: h('div', { style: 'width: 100%;' }, [
      h('textarea', { style: 'width: 100%;height:100px' }, `${scope.row.publicKey}`),
    ]),
  })
}
const deleteById = (scoped: any) => {
  let { id } = scoped.row
  let url = `/admin-api/crypto/customer/delete/`
  proxy.$http.delete(url, {
    params: { id }
  }).then((res: any) => {
    if (res.data.data) {
      ElMessageBox.alert('删除成功', '提示', {
        confirmButtonText: '确定',
        type: 'success',
      })
      window.location.reload()
    }
  })
}
const addAuth = () => {
  let url = `/admin-api/crypto/customer/create`
  proxy.$http.post(url, { id: Number(Math.random().toString().substring(2, 6)), customerName: form.value.customerName, customerHardware: form.value.customerHardware }).then((res: any) => {
    if (res.data.data) {
      ElMessageBox.alert('添加成功', '提示', {
        confirmButtonText: '确定',
        type: 'success',
      })
      // window.location.reload()
    } else {
      ElMessageBox.alert(`${res.data.msg}`, '提示', {
        confirmButtonText: '确定',
        type: 'error',
      })
    }
  }).catch((err: any) => {
    console.log(err)
    ElMessageBox.alert(`${err.data.msg}`, '提示', {
      confirmButtonText: '确定',
      type: 'error',
    })
  })
}
const updateAuth = (scoped: any) => {
  let url = "/admin-api/crypto/customer/update"
  ElMessageBox.prompt('仅允许修改客户名', '修改', {
    confirmButtonText: '确定',
    inputValue: scoped.row.customerName
  })
    .then(({ value }) => {
      proxy.$http.put(url, {
        id: scoped.row.id,
        customerName: value,
        customerHardware: scoped.row.customerHardware
      }).then((res: any) => {
        if (res.data.data) {
          ElMessageBox.alert('修改成功', '提示', {
            confirmButtonText: '确定',
            type: 'success',
          })
          window.location.reload()
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消修改',
      })
    })
}
const downloaKeyd = (scoped: any) => {
  let { id } = scoped.row
  let url = `/admin-api/crypto/customer/get/crypto`;
  proxy.$http.get(url, { params: { customerId: id, extendTime: 0 } }).then((res: any) => {
    let dl = new Blob([res.data], { type: 'text/plain' })
    let url = URL.createObjectURL(dl)
    let a = document.createElement("a")
    var event = new MouseEvent("click")
    a.download = `crypto.rairun`; // 创建blob地址,这个属性也决定了下载的文件名！！！
    a.href = url
    a.dispatchEvent(event) //触发a的点击事件！！！
    ElMessage.success('下载请求中，请稍后！')
    URL.revokeObjectURL(a.href)
  })
}
onMounted(() => {
  let url = "/admin-api/crypto/customer/page";
  proxy.$http.get(url, { params: {} }).then((res: any) => {
    gridData.value = res.data.data.list
  })
})

</script>

<template>
  <div class="app-container flex flex-col justify-center items-center gap-10">
    <div class="tableTool">
      <el-button type="primary" size="small" @click="dialogFormVisible = true">新增授权</el-button>
    </div>
    <el-table :data="gridData" class="!w-full" height="550">
      <el-table-column type="selection" width="55" />
      <el-table-column sortable align="center" property="id" label="序号" />
      <el-table-column sortable align="center" property="customerName" label="客户名" />
      <el-table-column sortable align="center" property="customerHardware" label="客户序列号" />
      <el-table-column sortable align="center" property="publicKey" label="公钥">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="showKey(scope)">点击查看</el-button>
        </template>
      </el-table-column>
      <el-table-column sortable align="center" property="publicKey" label="授权文件">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="downloaKeyd(scope)">点击下载</el-button>
        </template>
      </el-table-column>
      <el-table-column sortable align="center" property="createTime" label="创建日期" />
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="updateAuth(scope)">
            修改
          </el-button>
          <el-button link type="primary" size="small" @click="deleteById(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="currentPage1" :page-size="10" layout="total, prev, pager, next"
      :total="gridData.length" @size-change="" @current-change="" />

    <el-dialog v-model="dialogFormVisible" title="客户添加" width="650" height="550">
      <el-form :model="form">
        <el-form-item label="请输入被授权客户名">
          <el-input v-model="form.customerName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="请输入客户硬件唯一号">
          <el-input v-model="form.customerHardware" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addAuth">
            添加
          </el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<style lang="scss" scoped></style>
